<script lang="ts">
  import { defineComponent, ref, onMounted, watchEffect } from 'vue';
  import { useAppStore } from '@/store/modules/app';

  export default defineComponent({
    name: 'AppProvider',
    inheritAttrs: false,
    setup(_, { slots }) {
      const appStore = useAppStore();
      const w = ref(document.body.clientWidth);
      // 监听浏览器窗口变化
      watchEffect(() => {
        if (w.value <= 640) {
          appStore.setMobile(true);
          appStore.setCollapsed(false);
        } else {
          appStore.setMobile(false);
          appStore.setSidebar(false);
        }
      });
      onMounted(() => {
        // 监听窗口事件，判断窗口类型是否是移动端
        window.addEventListener('resize', () => {
          w.value = document.body.clientWidth;
        });
      });
      return () => slots.default?.();
    },
  });
</script>
